<template>
	<div class="page">
		<view class="box">
			<view class="box_herder flex align-items justify-content-between">
				<view class="box_herder_left">操作项目</view>
				<view class="box_herder_right flex align-items" v-if="obj.correlationNumbers.length>0"
					@click="getByOperateId">
					<view>关联票</view>
					<u-icon :name="show?'arrow-up':'arrow-down'" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<view class="content">
				<!-- <view class="prompt">注：请按顺序执行</view> -->
				<view class="item" v-for=" (v,i) in list" :key="i">
					<view class="item_herder flex   " v-if="v.category !=1">
						<view class="item_herder_left">{{i+1}}.{{v.name}}</view>
						<view v-if="v.annexUrl" class="item_herder_right" @click="nearby(v.annexUrl)">
							查看附件
						</view>
					</view>
					<view class="item_herder flex   " v-if="v.category ==1">
						<view class="item_herder_left">{{i+1}}.
							<view v-for="(vin,inx) in v.inputList" :key="inx">
								<view>{{vin}}</view>
								<block v-if="v.ifJump ==1">
									<u--input v-model="ifJus" :readonly="stepIdx != i || v.state ==1" class="input"
										border="surround"></u--input>
								</block>
								<block v-if="v.ifJump !=1">
									<u--input v-model="v.answer[inx].value" :readonly="stepIdx != i || v.state ==1"
										class="input" border="surround"></u--input>
								</block>

							</view>
							<view>{{v.inputTxt}}</view>
						</view>
						<view v-if="v.annexUrl" class="item_herder_right" @click="nearby(v.annexUrl)">
							查看附件
						</view>
					</view>
					<!-- 判断 -->
					<!-- <view v-if="v.category ==0" class="">
						<view class="item_rideo flex align-items margin-top15" v-for="(vi,idx) in v.shopList"
							@click="determineAdd(i,vi)">
							<view class="item_rideo_yuan" v-if="!determineSelect(i,vi.value)"> </view>
							<image class="item_rideo_img" v-if="determineSelect(i,vi.value)"
								src="/static/img/index/xuanzhong.png" mode="">
							</image>
							<view class="item_rideo_txt" :class="{
								txtColor:stepIdx != i || v.state ==1
							}">{{vi.value}}</view> 
						</view>
					</view> -->
					<!-- 不需要显示是否了 -->

					<!-- 填空 -->
					<!-- 	<view v-if="v.category ==1" class="item_input">
						<block v-for="(vi,idx) in v.shopList" :key="idx">
							<u--input v-model="v.answer[idx].value" :readonly="stepIdx != i || v.state ==1"
								class="input" :placeholder="vi.value" border="surround"></u--input>
						</block>
					</view> -->
					<!-- 选择 -->
					<view v-if="v.category ==2" class="item_rideo flex  align-items margin-top15"
						v-for="(vi,idx) in v.shopList" @click="addSelect(i,vi.value)">
						<!-- 		<view :class="{
							view1:v.value ==''
						}">请选择</view>
						<u-icon name="arrow-down" color="#CCCCCC " size="14"></u-icon> -->
						<view class="item_rideo_yuan1" v-if="!answerSelect(i,vi.value)"> </view>
						<!-- 		<image class="item_rideo_img" v-if="answerSelect(i,vi.value)"
							src="/static/img/index/xuanzhong.png" mode=""> -->
						<view class="item_rideo_yuan2" v-if="answerSelect(i,vi.value)">
							✔
						</view>
						<!-- <u-icon name="checkmark-circle-fill" size="18" v-if="answerSelect(i,vi.value)"
							color="#267DFF"></u-icon>
						</image> -->
						<view class="item_rideo_txt" :class="{
								txtColor:stepIdx != i
							}">{{vi.value}}</view>
					</view>
					<view class="item_upload" v-if="v.ifPhotograph ==1">
						<!-- 	<u-upload :fileList="v.file" :capture="['camera']" :disabled="stepIdx != i || v.state ==1"
							@afterRead="(event)=>afterRead(event,i)" @delete="(event)=>deletePic(event,i)" name="1"
							multiple :maxCount="1"></u-upload> -->

						<view class="uploadlist">
							<block v-if="v.file.length>0">
								<view class="uploadlist_item" v-for="(vd , ixd) in v.file" :key="ixd">
									<image :src="vd.url" mode="aspectFill" class="uploadlist_item_image"
										@click="previewImage(vd.url)"></image>
									<image src="/static/delete.png" class="uploadlist_delet" @click="deltet(i,ixd,v)">
									</image>
								</view>
							</block>

							<view class="uploadlist_add" @click="uplaodImg(i,v)" v-if="v.file.length<=0">
								<u-icon name="plus" size="30" color="#E6E6E6"></u-icon>
							</view>
						</view>
					</view>


					<view class="flex  comit ">
						<view @click="stepComit(i)" v-if="v.state ==0"> 提交</view>
					</view>

					<view class="ifJump" v-if="v.ifJump ==1"> 跳步操作</view>
				</view>

	<div class="canvansDiv" style="padding-bottom: 10rpx;">
					<div class="" style="font-size: 28rpx;font-weight: 700;">备注</div>
					<u--textarea v-model="operateRemarks" placeholder="请输入备注"  autoHeight  maxlength='-1' style="border: 1px solid #CCCCCC;margin-top: 8rpx;min-height:200rpx ;"></u--textarea>
				</div>
				<div class="canvansDiv" style="padding-bottom: 10rpx;">
					<div class="canvansTitle">操作人签名</div>
					<canvansVue @comit="comitCanvans"></canvansVue>
				</div>
			</view>
		</view>
		<!-- <view @click="ceshiUplaod">测试</view> -->
		<view class="btn flex">
			<!-- 	<view class="btn_jiaojie" @click="show = true">交接</view>
			<view class="btn_tiaobu" @click=" leapfrogAdd()  ">跳步</view> -->
			<view class="btn_jiaojie" @click="zhixing" style="flex: 1;">更多</view>
			<view class="btn_wancheng" @click="completeCmit">完成</view>
		</view>

		<!-- 交接 -->
		<u-popup :show="show" mode="center" :round="15" :zIndex="zIndex">
			<view class="block">
				<view class="block_herder">请选择交接后人员</view>
				<view class="padding-right42 padding-left42">
					<view class="block_item">
						<view class="block_item_labal vale">操作人</view>
						<view class="block_item_value  flex align-items"
							@click="claick('operateUserId','operateUserName',1)">
							<u-input v-model="handoverForm.operateUserName" placeholder="请选择 " :fontSize="16"
								:readonly="true" placeholderClass="placeholderClass"
								style="pointer-events:none"></u-input>
							<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
						</view>
					</view>
					<view class="block_item">
						<view class="block_item_labal ">监护人</view>
						<view class="block_item_value  flex align-items"
							@click="claick('guardianUserId','guardianUserName',2)">
							<u-input v-model="handoverForm.guardianUserName" placeholder="请选择 " :fontSize="16"
								:readonly="true" placeholderClass="placeholderClass"
								style="pointer-events:none"></u-input>
							<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
						</view>
					</view>
					<view class="block_item">
						<view class="block_item_labal ">一级审批 </view>
						<view class="block_item_value  flex align-items"
							@click="claick('monitorUserId','monitorUserName',2)">
							<u-input v-model="handoverForm.monitorUserName" placeholder="请选择 " :fontSize="16"
								:readonly="true" placeholderClass="placeholderClass"
								style="pointer-events:none"></u-input>
							<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
						</view>
					</view>
					<view class="block_item">
						<view class="block_item_labal ">二级审批</view>
						<view class="block_item_value  flex align-items"
							@click="claick('shiftSupervisorId','shiftSupervisorName',2)">
							<u-input v-model="handoverForm.shiftSupervisorName" placeholder="请选择 " :fontSize="16"
								:readonly="true" placeholderClass="placeholderClass"
								style="pointer-events:none"></u-input>
							<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
						</view>
					</view>

				</view>
				<view class="block_btn flex align-items">
					<view class="block_btn_left" @click="show =false">取消</view>
					<view class="block_btn_right" @click="handoverComit">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 跳步 -->
		<u-popup :show="leapfrogShow" mode="center" :round="15" :zIndex="zIndex" @close="leapfrogShow = false">
			<view class="block">
				<view class="block_herder">请选择跳过的步骤</view>
				<view class="padding-right42 padding-left42 soirder">
					<view class="leapfrog flex " v-for="(v,i) in subject" :key="i">
						<view class="leapfrog_subject" :class="{
						subjectColor:v.state ==0
					}">
							{{i+1}}.{{v.title}}
						</view>
						<view class="leapfrog_chekred" v-if="v.state ==1" @click="select(v.id,i+1)">
							<image class="leapfrog_img" v-if="isSelected(v.id)" src="/static/img/index/group.png"
								mode=""></image>
						</view>
						<view>
						</view>
					</view>
				</view>
				<view class="block_btn flex align-items">
					<view class="block_btn_left" @click="leapfrogShow =false">取消</view>
					<view class="block_btn_right" @click="leapfrogComit">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 提醒 -->
		<u-popup :show="remindShow" mode="center" :round="15" zIndex="9999999" @close="remindShow = false">
			<view class="block" style="width: 600rpx;">
				<view class="block_herder">提醒</view>
			</view>
			<view class="renmideTiao">
				确认跳过{{remindTxt}}步<text
					v-if="seleteSubject.length > 0 && list.length > 0 && seleteSubject[seleteSubject.length - 1].idx !== list.length">,从第{{remindNuxt}}步开始</text>
			</view>
			<view class="block_btn flex align-items">
				<view class="block_btn_left" @click="remindShow = false">取消</view>
				<view class="block_btn_right" @click="remindComit">确认</view>
			</view>
		</u-popup>
		<!-- 跳步原因 -->
		<u-popup :show="reasonShow" mode="center" :round="15" zIndex="9999999" @close="reasonShow = false">
			<view class="block" style="width: 650rpx;">
				<view class="block_herder">跳步原因</view>
			</view>
			<view class="padding-right42 padding-left42">
				<view class="block_item" style="height: auto;margin-bottom: 30rpx;    align-items: baseline;">
					<view class="block_item_labal  vale" style="width: auto;">跳步原因</view>
					<view class="block_item_value  flex align-items">
						<u--textarea placeholder="请输入内容" v-model="reason"
							style="border: 1rpx solid #e6e6e6;"></u--textarea>
					</view>
				</view>
			</view>
			<view class="block_btn flex align-items">
				<view class="block_btn_left" @click="reasonClick(1)">取消</view>
				<view class="block_btn_right" @click="reasonClick()">确认</view>
			</view>
		</u-popup>
		<!-- 完成 -->
		<u-popup :show="completeShow" mode="center" :round="15" zIndex="9999999" @close="completeShow = false">
			<view class="block" style="width: 600rpx;">
				<view class="block_herder">确认</view>
			</view>
			<view class="renmideTiao" style="width: 500rpx ; ">
				确认完成本次操作流程，确认后
				不允许修改！
			</view>
			<view class="block_btn flex align-items">
				<view class="block_btn_left" @click="completeShow = false">取消</view>
				<view class="block_btn_right" @click="comitOrderProcessEnd">确认</view>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="bottom" :round="15" zIndex="9999999" @close="show1 = false">
			<view class="block" style="height: 800rpx;width: 600rpx;"></view>
		</u-popup>
		<tree ref="tree" @comit="treeComit" :treeData="treeData" :type="type"></tree>
		<u-popup :show="showAdd" :round="10" zIndex="99999999999999">
			<view class="blocks">
				<view class="blocks_item" v-for=" (v,i) in operateIdList" :key="i" @click="Navto(v)">
					{{v.orderNumber}} <text :style="{
						color:color.get(v.stateColour - 0)
					}
					">（{{txt.get(v.stateColour - 0)}}）</text>
				</view>
				<view class="hr"></view>
				<view class="blocks_close" @click="showAdd =false">取消</view>
			</view>
		</u-popup>
		<helangcompress ref="helangCompress"></helangcompress>
		<!-- 签字 -->
		<!-- 		<u-popup :show="completeShow" mode="center" :round="15" zIndex="9999999" @close="completeShow = false">
				<view class="" style="width: 750rpx;padding: 10rpx;">
					<canvansVue @comit="comitCanvans"></canvansVue>
				</view>
			</u-popup> -->
		<u-action-sheet :actions="actionList" :closeOnClickOverlay="true" :closeOnClickAction="true" :title="title"
			:show="actionShow" style="margin-bottom: 89rpx;" @select="selectClick" @close="actionShow =false"></u-action-sheet>
	</div>
</template>

<script>
	import {
		orderProcessOperate,
		jumpApply,
		orderProcessEnd,
		handoverApply
	} from '@/api/operation.js'
	import {
		getListDeptForZTree,
		sysUserList,
		byOperateId,
		getDeptTree,
		getPositionList,
		getUserByPositionId
	} from '@/api/lssue.js'
	import urlConfig from "@/request/urlConfig.js";
	import helangcompress from '../helang-compress/helang-compress.vue'
	import canvansVue from "@/pages/canvas/canvas.vue"
	const color = new Map([
		[0, "#267DFF"],
		[1, "#E04734"],
		[2, "#8B8B8B"],
		[3, "#267DFF"],
		[4, "#E04734"],
	])
	const txt = new Map([
		[0, '待审批'],
		[1, '去处理'],
		[2, '已结束'],
		[3, '交接待确认'],
		[4, '作废'],
	])
	export default {
		components: {
			helangcompress,
			canvansVue
		},
		props: {
			listProcess: {
				type: Array,
				default: []
			},
			obj: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				color,
				txt,
				ifJus: '',
				list: [],
				fileList1: [],
				show: false,
				show1: false,
				zIndex: 99999,
				leapfrogShow: false,
				remindShow: false,
				reasonShow: false,
				reason: '',
				completeShow: false,
				subject: [{
					title: '1、接值（班）长令：启动（ ）号炉磨煤机。',
					state: 0, //0做过 1未作
					id: 1
				}],
				seleteSubject: [],
				idx: 1, //用户做到第几题了
				remindTxt: '',
				remindNuxt: '',
				stepIdx: 0, //定义一个变量 记录用做题步骤

				treeData: [],
				treeDataTwo: [],
				keyName: '', //定义一个字段名称
				keyId: '', //定一个字段id
				DEPT_ID: '',
				type: '0', //0部门单选 1用户单选 2用户多选
				state: 0,
				handoverForm: {
					id: '',
					operateUserId: '',
					operateUserName: '',
					guardianUserId: "",
					guardianUserName: '',
					shiftSupervisorId: '',
					shiftSupervisorName: '',
					monitorUserId: '',
					monitorUserName: ''
				},
				showAdd: false,
				operateIdList: [],
				treeDataTher: [],
				operateUserSign: '',
				operateRemarks:'',
				actionList: [{
						name: '交接'
					},
					{
						name: '跳步'
					}
				],
				actionShow: false,
				title: '执行操作'

			}
		},

		mounted() {

			let backendResponse = '2、先打开(),然后接通(),接着关闭().'; // 可根据实际情况修改
			console.log(backendResponse.split(/\(\)/).filter(Boolean));
			this.list = this.listProcess
			this.stepIdx = this.findLastIndexWithStateOne(this.listProcess)
			console.log(this.listProcess, this.stepIdx, "content");
			this.handoverForm.id = this.obj.id
			this.handoverForm = {
				id: this.obj.id,
				operateUserId: this.obj.operateUserId,
				operateUserName: this.obj.operateUserName,
				guardianUserId: this.obj.guardianUserId,
				guardianUserName: this.obj.guardianUserName,
				shiftSupervisorId: this.obj.shiftSupervisorId,
				shiftSupervisorName: this.obj.shiftSupervisorName,
				monitorUserId: this.obj.monitorUserId,
				monitorUserName: this.obj.monitorUserName
			}
			this.onSubmitList()
			this.getDeptTrees()
			console.log(this.obj, "obj");
		},

		watch: {
			show1(newVal, oldVal) {
				console.log();
				if (newVal) {
					this.zIndex = 888
				} else {
					this.zIndex = 99999
				}
			},
			listProcess(newVal, oldVal) {

			}
		},

		methods: {
			zhixing() {
				this.actionShow = !this.actionShow
			},
			selectClick({name}){
				console.log(name);
				if(name =="跳步"){
					this.leapfrogAdd()
				}else if(name =="交接"){
					this.show = true	
				}
				this.actionShow =false
			},

			Navto(v) {
				this.show = false
				if (v.stateColour == 1) {
					// this.jumpTo('/pages/addPerform/addPerform', {
					// 	id: v.id,
					// 	// state: state != 4 ? 0 : 1
					// 	state: v.state == 1 ? 0 : v.state == 3 ? 1 : v.state == 4 ? 2 : 0
					// })
					let state = v.state == 1 ? 0 : v.state == 3 ? 1 : v.state == 4 ? 2 : 0
					uni.redirectTo({
						url: `/pages/addPerform/addPerform?id=${v.id}&state=${state}`
					});
				} else {
					// this.jumpTo('/pages/detailsPerform/detailsPerform',{
					// 	id:v.id
					// })
					uni.redirectTo({
						url: `/pages/detailsPerform/detailsPerform?id=${v.id}`
					});
				}

			},
			// 获取所有岗位
			async getDeptTrees() {
				const res = await getPositionList()
				this.treeDataTher = res.datas.map(v => {
					return {
						id: v.posId,
						label: v.posName
					}
				})
			},
			ceshiUplaod() {
				uni.chooseImage({
					count: 1, // 最多选择一张图片
					sizeType: ['compressed'], // 压缩图片
					sourceType: ['camera'], // 可以从相册选择图片或通过相机拍照
					success: (chooseResult) => {
						const tempFilePath = chooseResult.tempFilePaths[0];

						console.log(tempFilePath, "tempFilePath");
					}
				});
			},
			nearby(url) {
				const extensionUrl = urlConfig.nearbyUrl + url
				const extension = extensionUrl.split('.').pop().toLowerCase();
				console.log(extensionUrl, "extensionUrl");
				if (extension == 'pdf') {
					window.android.startDoc(extensionUrl);
				} else {
					window.open(extensionUrl)
				}
			},
			// 根据id查询关联票
			async getByOperateId(id) {
				const res = await byOperateId({
					id: this.obj.id,
				})
				this.operateIdList = res.datas
				this.showAdd = true
				console.log(res, "res");
			},

			handoverComit() {
				if (this.obj.operateUserId == this.handoverForm.operateUserId) return uni.$u.toast('不能交接给自己')
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				handoverApply({
					...this.handoverForm
				}).then(res => {
					this.show = false
					uni.$u.toast('操作成功')
					uni.hideLoading()
					setTimeout(() => {
						// uni.navigateBack()
						// uni.redirectTo({
						// 	url: '/pages/perform/perform'
						// })
						window.android.backWeb();
					}, 300)
				})
			},
			onSubmitList() {
				getListDeptForZTree({
					is_flag: 1
				}).then((res) => {
					console.log(res);
					this.treeData = res.datas.map(ele => this.treeStructure(ele));
					this.treeDataTwo = res.datas.map(ele => this.treeStructure(ele));
					console.log(this.treeData, "treeData");
				});
			},
			getSysUserList(DEPT_ID) {
				sysUserList({
					PAGE_NO: 1,
					PAGE_SIZE: 10000,
					DEPT_ID: DEPT_ID,
					DEPT: DEPT_ID,
				}).then(res => {
					this.treeData = JSON.parse(res.datas).rows.map(v => {
						return {
							label: v.user_name,
							id: v.user_id,
							checked: false,
						}
					})
					if (this.type == 1) {
						this.treeData = this.treeData.filter(v => v.id != this.obj.operateUserId)
						this.$refs.tree.itemclick(false, false)
						this.type = 4
					}
					if (this.type == 2) {
						this.$refs.tree.itemclick(true, false)
					}
					this.state = 1
				})
			},
			getSysUserListTwo(DEPT_ID) {
				getUserByPositionId({
					PAGE_NO: 1,
					PAGE_SIZE: 10000,
					posId: DEPT_ID,
				}).then(res => {
					this.treeData = res.rows.map(v => {
						return {
							label: v.user_name,
							id: v.user_id,
							checked: false,
						}
					})
					if (this.type == 1) {
						this.$refs.tree.itemclick(false, false)
					}
					if (this.type == 2) {
						this.$refs.tree.itemclick(true, false)
					}
					this.state = 1
				})
			},
			treeStructure(ele) {
				const haveChildren = Array.isArray(ele.children) && ele.children.length > 0;
				return {
					id: ele.value,
					label: ele.label,
					checked: false,
					children: haveChildren ? ele.children.map(i => this.treeStructure(i)) : [],
				}
			},
			claick(id, name, type) {
				console.log(211111111);
				this.state = 0
				this.keyId = id
				this.keyName = name
				if (id == 'monitorUserId' || id == 'shiftSupervisorId' || id == "guardianUserId") {
					this.treeData = this.treeDataTher
				} else {
					this.treeData = this.treeDataTwo
				}
				console.log(this.treeDataTwo)
				console.log(this.treeDataTher)
				// this.treeData = this.treeDataTwo
				this.type = type
				if (type == 3) {
					this.treeData = this.deviceList
					this.$refs.tree.itemclick(false, true)
				} else {
					this.$refs.tree.itemclick(false, true)
				}
			},
			treeComit(e) {
				if (this.state == 0) {
					console.log(e, "e");
					if (this.type == 0 || this.type == 3) {
						this.handoverForm[this.keyId] = e[0].id
						this.handoverForm[this.keyName] = e[0].label
					} else {
						if (this.keyId == 'operateUserId') {
							this.getSysUserList(e[0].id)
						} else {
							this.getSysUserListTwo(e[0].id)
						}
					}
				}
				if (this.state == 1) {
					if (this.type == 1 || this.type == 4) {
						this.handoverForm[this.keyId] = e[0].id
						this.handoverForm[this.keyName] = e[0].label
					}
					if (this.type == 2) {
						this.handoverForm[this.keyId] = e.map(v => v.id).join(',')
						this.handoverForm[this.keyName] = e.map(v => v.label).join(',')
					}
					this.state = 0
				}
				console.log(this.handoverForm, this.state, "treeData");
			},
			findLastIndexWithStateOne(array) {
				let lastIndex = array.reduce((acc, curr, index) => {
					if (curr.state == 1) {
						console.log(curr, "curr");
						console.log(index);
						return index;
					}
					return acc;
				}, -1);


				// 如果 lastIndex 仍然为 -1，表示数组中没有符合条件的元素，将 lastIndex 设为 0
				// if (lastIndex === -1) {
				// 	lastIndex = 0;
				// }
				console.log(lastIndex, "lastIndex");
				return lastIndex == -1 ? 0 : lastIndex + 1;
			},
			// 完成弹窗
			completeCmit() {
				console.log(111111);
				if (this.stepIdx != this.list.length) return uni.$u.toast('请填写完操作流程')
				if (this.operateUserSign == '') return uni.$u.toast('请先签名并保存')
				this.completeShow = true
			},
			// 完成
			comitCanvans(file_path) {
				// operateUserSign
				this.operateUserSign = file_path
				// this.comitOrderProcessEnd()
				// this.completeShow = false
			},

			async comitOrderProcessEnd() {
				const res = await orderProcessEnd({
					id: this.obj.id,
					operateUserSign: this.operateUserSign,
					operateRemarks:this.operateRemarks
				})
				if (res.success_flag == 200) {
					uni.$u.toast('操作成功')
					// uni.navigateBack()
					// uni.redirectTo({
					// 	url: '/pages/perform/perform'
					// })
					window.android.backWeb();
				} else {
					uni.$u.toast(res.error_msg)
				}

			},
			// 跳步
			leapfrogAdd() {
				this.seleteSubject = []
				this.subject = this.list.map((v, i) => {
					let state
					if (this.stepIdx == 0) {
						state = 1
					} else {
						state = i < this.stepIdx ? 0 : 1
					}
					console.log(state, "state: i <= this.stepIdx ? 0 : 1,");
					return {
						title: v.name,
						state: state,
						id: v.id
					}
				})
				console.log(this.subject, "<= 1");
				this.leapfrogShow = true
			},
			// 提交跳步
			reasonClick(type) {
				if (type) {
					this.reasonShow = false
					return
				}
				if (this.reason == '') return uni.$u.toast('请填写原因')
				const ids = this.seleteSubject.map(v => v.id).join(',')
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				jumpApply({
					ids: ids,
					reason: this.reason
				}).then(res => {
					console.log(res, "res");
					uni.hideLoading()
					this.reasonShow = false
					uni.$u.toast('申请成功')
					// uni.navigateBack()
					// uni.redirectTo({
					// 	url: '/pages/perform/perform'
					// })
					window.android.backWeb();
				})

			},
			// 提交做题
			async stepComit(i) {
				if (this.list[i].state == 1) return uni.$u.toast('当前已提交')
				if (this.stepIdx != i) return uni.$u.toast('请先完成上一步操作')
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				const item = this.list[i]; // 获取当前项
				let form = {
					id: item.id,
					fileUrl: '',
					submitContent: ''
				};
				// 根据不同类别进行处理
				switch (item.category) {
					case '0':
						// 处理类型为0的逻辑
						// if (item.answer.length <= 0) {
						// 	return uni.$u.toast('请先选择选项');
						// }
						form.submitContent = '是';
						break;
					case '1':
						// 处理类型为1的逻辑
						let incomplete = item.answer.some(v => v.value == '');
						console.log(item.answer, 11111111111)
						if (incomplete) {
							return uni.$u.toast('请填写完整选项');
						}
						form.submitContent = item.answer.map(v => v.value).join(',');
						break;
					case '2':
						// 处理类型为3的逻辑
						if (item.answer.length <= 0) {
							return uni.$u.toast('请先选择选项');
						}
						form.submitContent = item.answer.map(v => v.value).join(',');
						// if (item.ifPhotograph === 1) {
						// 	if (item.file.length <= 0) {
						// 		return uni.$u.toast('请填写图片');
						// 	}
						// 	form.fileUrl = item.file[0].url;
						// }
						break;
				}
				// 检查是否需要上传图片
				if (item.ifPhotograph == 1) {
					if (item.file.length <= 0) {
						return uni.$u.toast('请填写图片');
					}
					form.fileUrl = item.file[0].urlTwo;
				}
				console.log(item, form);
				// 调用接口提交数据
				orderProcessOperate({
					...form
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					this.list[i].state = 1
					this.stepIdx = this.stepIdx + 1
				});
			},
			comit(e) {
				console.log(JSON.stringify(e), "返回值");
			},
			determineAdd(i, v) {
				if (this.list[i].state == 1) return uni.$u.toast('当前已提交')
				if (this.stepIdx != i) return uni.$u.toast('请先完成上一步操作')
				if (this.list[i].answer.length <= 0) {
					this.list[i].answer.push({
						value: v.value,
					})
				} else {
					this.list[i].answer[0].value = v.value
				}
				this.$forceUpdate()
			},
			addSelect(i, value) {
				if (this.list[i].state == 1) return uni.$u.toast('当前已提交')
				if (this.stepIdx != i) return uni.$u.toast('请先完成上一步操作')
				const idx = this.list[i].answer.findIndex(v => v.value == value)
				if (idx < 0) {
					this.list[i].answer.push({
						value: value,
					})
				} else {
					this.list[i].answer.splice(idx, 1)
				}
				this.$forceUpdate()
			},
			answerSelect(i, value) {
				const idx = this.list[i].answer.findIndex(v => v.value == value)
				if (idx >= 0) {
					return true
				} else {
					return false
				}
			},
			//判断是否选中
			determineSelect(i, value) {
				if (this.list[i].state == 0) {
					if (this.stepIdx != i) return
				}
				if (this.list[i].answer.length <= 0) {
					return false;
				} else {
					return this.list[i].answer[0].value == value
				}
			},
			// 判断是否选中
			select(id, idx) {
				const index = this.seleteSubject.findIndex(item => item.id === id);
				if (index !== -1) {
					this.seleteSubject.splice(index, this.seleteSubject.length - index); // 如果已选中则删除之后所有数据
				} else {
					console.log("选中", idx - this.stepIdx);
					if (this.seleteSubject.length <= 0) {
						if (idx - this.stepIdx <= 1) {
							this.seleteSubject.push({
								id: id,
								idx: idx
							});
						} else {
							uni.$u.toast('请从当前步骤开始勾选 不允许跳步勾选')
						}

					} else {
						if (idx - this.seleteSubject[this.seleteSubject.length - 1].idx === 1) {
							this.seleteSubject.push({
								id: id,
								idx: idx
							}); // 如果未选中则添加
						} else {
							uni.$u.toast('请从当前步骤开始勾选 不允许跳步勾选')
						}
					}
				}
			},
			isSelected(id) {
				// 判断当前id是否在 selectedIds 数组中
				return this.seleteSubject.some(item => item.id === id);
			},
			leapfrogComit() {
				if (this.seleteSubject.length <= 0) {
					return uni.$u.toast('请选择步数')
				}
				this.leapfrogShow = false
				this.remindTxt = this.seleteSubject.map(v => v.idx).join('、')
				this.remindNuxt = this.seleteSubject[this.seleteSubject.length - 1].idx + 1
				console.log(this.seleteSubject, "this.remindNuxt");
				console.log(this.remindNuxt, this.list.length, "this.remindNuxt");
				this.remindShow = true
			},
			remindComit() {
				this.remindShow = false
				this.reasonShow = true
			},
			// 处理图片放大
			previewImage(url) {
				uni.previewImage({
					current: url,
					urls: [url],
					loop: true,
				})
			},
			// 删除图片
			deletePic(event, idx) {
				if (this.list[idx].state == 1) return
				console.log(event, idx);
				let items = this.list[idx].file
				items.splice(event.index, 1)
				this.list[idx].file = [...items]
				console.log(this.list[idx].file);
				this.$forceUpdate()
			},
			uplaodImg(idx, row) {
				console.log();
				// :disabled="idx != i || v.state ==1"
				if (this.stepIdx != idx || row.state == 1) return
				uni.chooseImage({
					count: 1, //默认9
					sizeType: [], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res);
						let that = this;
						this.$refs.helangCompress
							.compress(res.tempFiles[0], that, 1)
							.then((uploadRes) => {
								console.log(uploadRes, "res");
								this.list[idx].file.push({
									url: urlConfig.nearbyUrl + uploadRes.datas.file_path,
									urlTwo: uploadRes.datas.file_url,
								})
								console.log(this.list[idx]);
								this.$forceUpdate()
							});
					}
				})
			},
			deltet(i, idx, row) {
				console.log('测试', row, this.stepIdx, idx);
				if (row.state == 1) return
				this.list[i].file.splice(idx, 1)
				this.$forceUpdate()
			},
			// 删除图片
			deletePic(event, idx) {
				console.log(event, idx);
				let items = this.list[idx].file
				items.splice(event.index, 1)
				this.list[idx].file = [...items]
				console.log(this.list[idx].file);
				this.$forceUpdate()
			},
			// 新增图片
			async afterRead(event, idx) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				let items = this.list[idx].file
				let lists = [].concat(event.file)
				let fileListLen = items.length
				lists.forEach((item) => {
					this.list[idx].file.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, "result");
					let item = items[fileListLen]
					this.$nextTick(() => {
						items.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result,
							urlTwo: result,
						}))
						fileListLen++
					})

				}
				this.list[idx].file = [...items]
				this.$forceUpdate()
				console.log(this.list[idx].file, "this.list[idx].file");
				uni.hideLoading()
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: urlConfig.baseURL + 'sys/file/uploadFile', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'User-Token': uni.getStorageSync('token') || "",
							// 'Content-Type': 'multipart/form-data',
						},
						success: (res) => {
							console.log(res, "res");
							setTimeout(() => {
								resolve(JSON.parse(res.data).datas.file_url)
							}, 1000)
						},
						fail: (err) => {
							uni.$u.toast('上传失败')
							uni.hideLoading()
						}
					});
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.page {
		padding-bottom: 160rpx;
	}

	.box {
		margin-top: 18rpx;
		background-color: #FFFFFF;
		padding: 29rpx 34rpx;
		padding-bottom: 0;

		&_herder {
			padding-bottom: 29rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #999999;

				view {
					margin-right: 23rpx;
				}
			}
		}
	}

	.content {
		.prompt {
			margin-top: 21rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF0000;
			text-align: left;
			font-style: normal;
		}

	}

	.item {
		margin-top: 30rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;

		&_herder {
			&_left {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
				line-height: 40rpx;
			}

			&_right {
				width: 120rpx;
				// height: 100rpx;
				margin-left: 18rpx;
				border-radius: 24rpx;
				border: 1rpx solid #267DFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #267DFF;
				height: 54rpx;
			}
		}

		&_input {
			// margin-top: 40rpx;
		}

		&_upload {
			margin-top: 25rpx;
		}

		&_rideo {
			margin-right: 20rpx;

			&_yuan {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 50%;
			}

			&_yuan1 {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 8rpx;
			}

			&_yuan2 {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 8rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #267DFF;
				color: #FFF;
			}

			&_img {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
			}

			&_txt {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
			}
		}

		&_select {
			height: 65rpx;
			border: 1rpx solid #CCCCCC;
			padding: 12rpx 18rpx;
			border-radius: 12rpx;
			margin-top: 28rpx;

			view {
				font-weight: 400;
				font-size: 29rpx;

				line-height: 65rpx;
			}

			.view1 {
				color: #CCCCCC;
			}
		}

	}

	.item:first-of-type {
		margin-top: 12rpx;
	}

	.item:last-child {
		border: none;
	}

	.input {
		border: 1rpx solid #CCCCCC;
		border-radius: 12rpx;
		margin: 10rpx 0;
	}

	/deep/.u-upload__button {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/.u-upload__status {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/ .u-upload__wrap__preview__image {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		// padding-bottom: 60rpx;
		background-color: #FFFFFF;
		z-index: 100000;

		&_jiaojie {
			width: 190rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			border: 1rpx dashed #CCCCCC;
		}

		&_tiaobu {
			width: 190rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			border: 1rpx dashed #CCCCCC;


		}

		&_wancheng {
			flex: 1;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			background-color: #267DFF;
			color: #FFF;
		}
	}

	.blocks {
		&_item {
			width: 750rpx;
			height: 123rpx;
			font-weight: 400;
			color: #000000;
			line-height: 45rpx;
			text-align: right;
			font-style: normal;
			text-align: center;
			line-height: 123rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.hr {
			height: 10rpx;
			background-color: #F5F5F5;
		}

		&_close {
			height: 123rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			color: #000000;
			text-align: center;
			line-height: 123rpx;
		}
	}

	.block {
		width: 700rpx;

		// padding: 0 42rpx;


		&_herder {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			padding-top: 51rpx;
			margin-bottom: 20rpx;
		}

		&_item {
			height: 105rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			&_labal {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #666666;
				width: 196rpx;
			}

			&_value {
				flex: 1;
			}

			&_values {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
				margin-right: 20rpx;
			}
		}

		&_item:last-child {
			border: none;
		}

		&_btn {
			border-top: 1rpx solid #E6E6E6;
			height: 88rpx;

			&_left {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				border-right: 1rpx solid #E0E0E0;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				flex: 1;
				text-align: center;
				line-height: 88rpx;


				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}


	}

	.soirder {
		max-height: 600rpx;
		overflow-y: scroll;
	}

	.leapfrog {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-top: 30rpx;

		&_subject {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			line-height: 47rpx;
			text-align: left;
			flex: 1;
		}

		&_chekred {
			width: 53rpx;
			height: 53rpx;
			border-radius: 9rpx;
			border: 2rpx solid #E6E6E6;
			margin-left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&_img {
			width: 32rpx;
			height: 32rpx;
		}

		.subjectColor {
			color: #8B8B8B !important;
		}
	}

	.renmideTiao {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #999999;
		margin: 0 auto;
		line-height: 41rpx;
		margin-bottom: 40rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.leapfrog:last-child {
		border: none;
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 26rpx;
		color: #CCCCCC;
	}

	.vale::before {
		content: '*';
		color: #FF0000;
	}

	.comit {
		justify-content: flex-end;
		margin-top: 15rpx;

		view {
			padding: 8rpx 18rpx;
			border: 1rpx solid #267DFF;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #267DFF;
		}
	}

	.txtColor {
		color: #8B8B8B !important;
	}

	.uploadlist {
		display: flex;

		&_item {
			position: relative;
			margin-left: 10rpx;

			&_image {
				height: 150rpx;
				width: 150rpx;
				border-radius: 6rpx;
			}
		}

		&_delet {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: 0;
			right: 0;
			z-index: 100;
			background-color: #000000;
		}

		&_add {
			height: 150rpx;
			width: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #E6E6E6;
			border-radius: 6rpx;
		}
	}

	.ifJump {
		color: red;
		text-align: left;
		margin-top: 10rpx;

	}

	.canvansDiv {
		margin-top: 10rpx;
	}

	.canvansTitle {
		font-size: 28rpx;
		font-weight: 700;
	}

	.canvansTitle::before {
		content: "*";
		color: red;
	}

	/deep/.u-action-sheet {
		margin-bottom: 89rpx !important;
	}
</style>